/**
 *  Description: node
 *  Author: yzm
 */

/******项目节点**/
.ca-node{
    em {
        float: left;
        color: #333;
        font-size: 12px;
        margin-left:20px;
        line-height: 36px;
        margin-top: 0;
    }
    span {
        margin-left:10px;
        margin-top: 10px;
        display: block;
        float: left;
        width: 16px;
        height: 16px;
        border-radius: 50%;
    }
    .project-node--completed{//完成
        background: #0180cd;
    }
    .project-node--no-complete{//未完成
        background: #ccc;
    }
    .project-node--no-node {//没有节点
        background: #666;
    }
    .project-node--conduct{//进行中
        background: #ff9933;
    }
    .project-node--not-passed {//未通过
        background: #cc3300;
    }
    .project-node--suspend {//暂停
        background: #666;
    }
}
.ca-node-box {
    margin-top: 10px;
    position: relative;
    ul {
        vertical-align: middle;
        position: relative;
        z-index: 7;
        li {
            vertical-align: middle;
            float: left;
            padding: 0 17px;
            text-align: center;
            position: relative;
            width:11%;
            .ca-node-text {
                line-height: 25px;
                margin: 5px 0px;
                height: 25px;
            }
            .ca-node-state {
                width: 22px;
                height: 22px;
                overflow: hidden;
                border-radius: 50%;
                margin: 0 auto;
                position: relative;
                /* background:#ccc;*/
                z-index:2
            }
            .ca-node-color-666{color:#666666}
            .ca-node-line{ position: absolute;width:100%;height:1px; background:#e2e2e2; top: 50%;left:50%; z-index: 1}
            .state_01 {
                background: #0180cd;
            }
            .state_02 {
                background: #ccc
            }
            .state_03 {
                background: #666
            }
            .project-node--completed{//完成
                background: #0180cd;
            }
            .project-node--no-complete{//未开始
                background: #ccc;
            }
            .project-node--no-node {//没有节点
                background: #666;
            }
            .project-node--conduct{//进行中
                background: #ff9933;
            }
            .project-node--not-passed {//未通过
                background: #cc3300;
            }
            .project-node--suspend {//暂停
                background: #666;
            }
        }
        li:last-child .ca-node-line {
            left: -50%;
        }
    }
}
.ca-node-details{width:250px; line-height: 25px}
/***竖向流程评审**/
.ca-process ul {
    height: auto;
    li {
        vertical-align: middle;
        width: 100%;
        overflow: hidden;
        position: relative;
        .ca-process-ico {
            font-family: MicrosoftYaHei;
            width: 140px;
            height: 15px;
            position: absolute;
            top: 46%;
            line-height: 15px;
            text-align: right;
            font-size: 14px;
            background-size: 10px 10px;
            float: left;
            padding-right: 35px;
        }
        .ca-process-circle{position: absolute; width:6px; height:6px;background-color: #1b81d9;top:50%;left:136px;border-radius: 50%; z-index: 2;}
        .ca-process-line{ position: absolute;width:1px;height:100%; background:#ccd5ff;top:0;left:139px; z-index: 1}
        .ca-process-text {
            margin-left: 175px;
            padding: 15px 20px 15px 0px;
            line-height: 20px;
            position: relative;
            word-break: break-all;
            .ca-process-text-layout{
                width: 568px;
                background-color: #f7f7f7;
                padding: 15px 20px 5px 20px;
            }
        }
    }
    li:hover {
        // background-color: rgba(236, 246, 254, 0.55);
        .ca-process-circle {
            box-sizing: content-box;
            width: 9px;
            height: 9px;
            background-color: #1b81d9;
            border: solid 3px #ecf6ff;
            top:46%;left:132px;
        }
    }
    li:first-child .ca-process-line.first {
        height:50%;
        top: 50%;
    }
    li:last-child .ca-process-line.last {
        height:50%;
        bottom: 50%;
    }
}

